<template>
    <div class="container">
        <div class="handle-box">
            <el-form ref="form" :model="searchForm" label-width="100px" class="flex">
              <el-form-item label="地区：" class="wid33">
                    <el-select v-model="searchForm.REGION_ID" placeholder="请选择地区" @change="changeStreet">
                        <el-option
                            v-for="item in clientNameOpts"
                            :key="item.REGION_ID"
                            :label="item.REGION_NAME"
                            :value="item.REGION_ID"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="街道：" class="wid33">
                    <el-select v-model="searchForm.STREET_ID" placeholder="请选择街道" @change="changeCommunity" clearable>
                        <el-option
                            v-for="item in streetOpts"
                            :key="item.STREET_ID"
                            :label="item.STREET_NAME"
                            :value="item.STREET_ID"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="社区：" class="wid33">
                    <el-select v-model="searchForm.COMMUNITY_ID" placeholder="请选择" @change="changePlot" clearable>
                        <el-option
                            v-for="item in communityOpts"
                            :key="item.COMMUNITY_ID"
                            :label="item.COMMUNITY_NAME"
                            :value="item.COMMUNITY_ID"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="小区：" class="wid33">
                    <el-select v-model="searchForm.VILLAGE_ID" placeholder="请选择" clearable>
                        <el-option
                            v-for="item in plotOpts"
                            :key="item.VILLAGE_ID"
                            :label="item.VILLAGE_NAME"
                            :value="item.VILLAGE_ID"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="mohu()">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
          <el-table-column prop="STREET_NAME" label="所属街道">
            <template scope="scope">
              {{ scope.row.STREET_NAME || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="COMMUNITY_NAME" label="所属社区">
            <template scope="scope">
              {{ scope.row.COMMUNITY_NAME || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="VILLAGE_NAME" label="所属小区">
            <template scope="scope">
              {{ scope.row.VILLAGE_NAME || '--' }}
            </template>
          </el-table-column>
            <el-table-column
              prop="EX_NAME"
              label="商品名称"
              width="180">
              <template scope="scope">
                  <div class="u" @click="getMore(scope.row)">{{ scope.row.EX_NAME }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="EX_COUNT"
              label="商品个数">
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="tableData.length"
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>

           <!-- 商品预约详情 -->
            <el-dialog v-dialogDrag title="商品预约详情" :visible.sync="getmoredialog" width="50%" >
                  <el-table
                      :data="detaildata"
                      height="250"
                      border
                      style="width: 100%">
                      <el-table-column
                        prop="EX_NAME"
                        label="商品名称"
                        width="180">
                        <template scope="scope">
                          {{ scope.row.EX_NAME || '--' }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="PEOPLE_NAME"
                        label="领用人"
                        width="180">
                        <template scope="scope">
                          {{ scope.row.PEOPLE_NAME || '--' }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="EX_COUNT"
                        label="领用数量">
                        <template scope="scope">
                          {{ scope.row.EX_COUNT || '--' }}
                        </template>
                      </el-table-column>
                  </el-table>
          </el-dialog>
    </div>
</template>
<script>
import '../../assets/css/common.css'

export default {
  data () {
    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      // 原始数据
      originalData: [],
      tableData: [],
      searchForm: {
        REGION_ID: '',
        STREET_ID: '',
        COMMUNITY_ID: '',
        VILLAGE_ID: ''
      },
      clientNameOpts: [],
      streetOpts: [],
      communityOpts: [],
      plotOpts: [],

      getmoredialog: false,
      detaildata: []
    }
  },
  async created () {
    // 获取行政区
    await this.getClientNameOpts();
    this.getData();
  },
  methods: {
    // 获取行政区
    async getClientNameOpts () {
      const { data } = await this.$axios.get(`${this.$url}/GetRegionListApi`);
      this.clientNameOpts = data;
      if (localStorage.getItem('clentno')) {
        this.searchForm.REGION_ID = localStorage.getItem('clentno');
        this.changeStreet(this.searchForm.REGION_ID);
      } else {
        this.searchForm.REGION_ID = data[0].REGION_ID;
        this.changeStreet(this.searchForm.REGION_ID);
        if (localStorage.getItem('STREET_NO') && localStorage.getItem('STREET_NO') !== 'null') {
          this.searchForm.STREET_ID = localStorage.getItem('STREET_NO');
          this.changeCommunity(this.searchForm.STREET_ID);
        }
      }
    },
    // 获取街道
    async changeStreet (val) {
      const { data } = await this.$axios.get(`${this.$url}/sreetListsApi?id=${val}`);
      this.streetOpts = data;
    },
    // 获取社区
    async changeCommunity (val) {
      const { data } = await this.$axios.get(`${this.$url}/communityListsApi?id=${val}`);
      this.communityOpts = data;
    },
    // 获取小区
    async changePlot (val) {
      const { data } = await this.$axios.get(`${this.$url}/villageListsApi?id=${val}`);
      this.plotOpts = data;
    },
    getData () {
      let clientNo = '';
      let level = '';
      if (this.searchForm.VILLAGE_ID) {
        level = '小区';
        clientNo = this.searchForm.VILLAGE_ID;
      } else if (this.searchForm.COMMUNITY_ID) {
        level = '社区';
        clientNo = this.searchForm.COMMUNITY_ID;
      } else if (this.searchForm.STREET_ID) {
        level = '街道';
        clientNo = this.searchForm.STREET_ID;
      } else if (this.searchForm.REGION_ID) {
        level = '行政区';
        clientNo = this.searchForm.REGION_ID;
      }
      this.$axios({
        url: `${this.$aurl}/GetExchangesAppointmentCommodity?ClientNo=${clientNo}&Level=${level}`,
        method: 'get'
      }).then(res => {
        if (res.status == 200) {
          console.log(res.data);
          this.tableData = res.data;
          // this.mohu()
          // console.log(res.data)
        }
      })
    },
    // 模糊查询
    mohu () {
      this.getData();
      // this.tableData = this.originalData;
      // if (this.searchForm.streetname !== '') this.tableData = this.tableData.filter(item => item.STREET_NAME.includes(this.searchForm.streetname));
      // if (this.searchForm.communitname !== '') this.tableData = this.tableData.filter(item => item.COMMUNITY_NAME.includes(this.searchForm.communitname));
      // if (this.searchForm.plotname !== '') this.tableData = this.tableData.filter(item => item.VILLAGE_NAME.includes(this.searchForm.plotname));
      // if (this.searchForm.prodName !== '') this.tableData = this.tableData.filter(item => item.EX_NAME.includes(this.searchForm.prodName));
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
    },
    handleSizeChange (size) {
      this.pageSize = size;
    },
    // 预约详情弹框
    async getMore(row){
      let clientNo = '';
      let level = '';
      if (this.searchForm.VILLAGE_ID) {
        level = '小区';
        clientNo = this.searchForm.VILLAGE_ID;
      } else if (this.searchForm.COMMUNITY_ID) {
        level = '社区';
        clientNo = this.searchForm.COMMUNITY_ID;
      } else if (this.searchForm.STREET_ID) {
        level = '街道';
        clientNo = this.searchForm.STREET_ID;
      } else if (this.searchForm.REGION_ID) {
        level = '行政区';
        clientNo = this.searchForm.REGION_ID;
      }
      this.$axios({
        url: `${this.$aurl}/GetExchangesAppointmentCommodityDetail?ClientNo=${clientNo}&Level=${level}&EX_RULE_ID=${row.EX_RULE_ID}`,
        method: 'get',
      }).then(item=>{
          if(item.status == 200){
            this.detaildata = Object.assign([], item.data)
          }
      })
      this.getmoredialog = true;
    },
  }
}
</script>
<style scoped>
</style>